<template>
	<!-- 售后 -->
	<view class="refund-main">
		<!-- 商品 -->
		<view class="refund-shop">
			<view class="refund-shop-header">商品详情</view>
			<view class="shopItem" v-for="item in goodsInfo" :key="item.id">
				<view class="shopImage">
					<image :src="imageUrls(item.fileUrl)" class="images"></image>
				</view>
				<view class="shopInfo">
					<view class="name">
						{{ item.name }}
					</view>
					<view style="font-size: 26rpx; color: #999">规格:{{ item.spec }}</view>
				</view>
				<view class="shopInfo-pir">
					<view class="price">
						￥
						<text style="font-size: 28rpx">{{ item.total_price }}</text>
					</view>
					<view class="num">共{{ item.buy_num }}件</view>
				</view>
			</view>
		</view>

		<!-- 退货换货 -->
		<view class="refund-classify">
			<view class="classifyItem" style="border-bottom: 1px #f3f3f3 solid" @click="changeClassifyIndex(0)">
				<view class="classifyItem-name">
					<uni-icons type="close" size="30" style="margin-right: 5px" color="#e43927"></uni-icons>
					<text style="font-weight: bold">商品退货</text>
				</view>
				<view class="classifyItem-time">
					<uni-icons type="checkbox-filled" size="20" color="#e43927" v-if="classifyIndex == 0"></uni-icons>
					<uni-icons type="circle" size="20" color="#444" v-else></uni-icons>
				</view>
			</view>
			<view class="classifyItem" style="border-bottom: 1px #f3f3f3 solid" @click="changeClassifyIndex(1)">
				<view class="classifyItem-name">
					<uni-icons type="loop" size="30" style="margin-right: 5px" color="#ffcb00"></uni-icons>
					<text style="font-weight: bold">商品换货</text>
				</view>
				<view class="classifyItem-time">
					<uni-icons type="checkbox-filled" size="20" color="#e43927" v-if="classifyIndex == 1"></uni-icons>
					<uni-icons type="circle" size="20" color="#444" v-else></uni-icons>
				</view>
			</view>
			<view class="classifyItem" @click="changeClassifyIndex(2)">
				<view class="classifyItem-name">
					<uni-icons type="wallet" size="30" style="margin-right: 5px" color="#42b983"></uni-icons>
					<text style="font-weight: bold">商品退款</text>
				</view>
				<view class="classifyItem-time">
					<uni-icons type="checkbox-filled" size="20" color="#e43927" v-if="classifyIndex == 2"></uni-icons>
					<uni-icons type="circle" size="20" color="#444" v-else></uni-icons>
				</view>
			</view>
		</view>

		<!-- 申请理由 -->
		<view class="refund-argument">
			<view class="refund-argument-header">申请理由</view>
			<view class="refund-argument-content">
				<uni-easyinput type="textarea" v-model="argumentVal" placeholder="请输入申请理由" />
			</view>
		</view>

		<view class="refund-btn" @click="getuserAfterSale">确认申请</view>
	</view>
</template>

<script>
import { userOrderDetail, userAfterSale } from '../../api/order/index.js';
import { imageUrl } from '../../utils/tools.js';
export default {
	data() {
		return {
			goodsInfo: [],
			orderId: '',
			argumentVal: '',
			classifyIndex: 0
		};
	},
	onLoad(option) {
		const { id } = option;
		this.orderId = id;
		this.getUserOrderDetail(id);
	},
	methods: {
		async getUserOrderDetail(id) {
			try {
				const resData = await userOrderDetail({
					id
				});
				this.goodsInfo = resData.data.goods_info;
			} catch (e) {
				throw Error(e);
				//TODO handle the exception
			}
		},

		imageUrls(val) {
			return imageUrl(val);
		},

		changeClassifyIndex(index) {
			this.classifyIndex = index;
		},

		async getuserAfterSale() {
			try {
				const resData = await userAfterSale({
					id: this.orderId,
					type: this.classifyIndex,
					reason: this.argumentVal
				});
				if (resData.code == 1) {
					uni.showToast({
						title: '申请成功',
						icon: 'none',
						duration: 1500
					});
					setTimeout(() => {
						uni.navigateBack(-1);
					}, 1500);
				}
			} catch (e) {
				throw Error(e);
				//TODO handle the exception
			}
		}
	}
};
</script>

<style>
page {
	background-color: #f3f3f3;
}
</style>

<style scoped lang="scss">
@mixin boxDef {
	background-color: #fff;
	box-sizing: border-box;
	padding: 20rpx;
	border-radius: 10rpx;
}
.refund-main {
	box-sizing: border-box;
	padding: 20rpx;
	.refund-shop {
		@include boxDef;
		.shopItem {
			display: flex;
			font-size: 13px;
			color: #444;
			margin-bottom: 10px;
			padding-bottom: 10px;
			border-bottom: 1px #f3f3f3 solid;
			.shopImage {
				width: 140rpx;
				.images {
					width: 120rpx;
					height: 120rpx;
				}
			}

			.shopInfo {
				height: 120rpx;
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
			}

			.shopInfo-pir {
				.price {
					color: #e43927;
					margin-bottom: 5px;
					font-size: 12px;
				}
				.num {
					color: #444;
					text-align: right;
				}
			}
		}
	}

	.refund-classify {
		@include boxDef;
		margin-top: 20rpx;
		padding: 0px 20rpx;
		color: #444;
		.classifyItem {
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 60px;
			.classifyItem-name {
				display: flex;
				align-items: center;
				font-size: 26rpx;
			}

			.classifyItem-time {
				display: flex;
				align-items: center;
			}
		}
	}

	.refund-argument {
		@include boxDef;
		margin-top: 20rpx;
		.refund-argument-header {
			heigth: 30px;
			line-height: 30px;
			margin-bottom: 20rpx;
			font-size: 28rpx;
			color: #444;
			font-weight: bold;
		}
		.refund-argument-content {
			background-color: #fff;
		}
	}

	.refund-btn {
		background-color: #e43927;
		color: #fff;
		font-size: 28rpx;
		height: 40px;
		line-height: 40px;
		text-align: center;
		border-radius: 10rpx;
		margin: 20rpx 0;
	}
}

.refund-shop-header {
	heigth: 30px;
	line-height: 30px;
	margin-bottom: 20rpx;
	font-size: 28rpx;
	color: #444;
	font-weight: bold;
}
</style>
